<template>
<!--  这个标签用于异步调用的控件，有两个插槽，一个是正常的，一个是备用的，有点像熔断降级操作-->
  <suspense>
    <template v-slot:default>
      <AsyncCom></AsyncCom>
    </template>
    <template v-slot:fallback>
      等控件呢
    </template>
  </suspense>
  <hr>
  <div id="ye">
   <h2>APP 组件:{{name}}--{{age}}</h2>
    <Erzi/>
  </div>
  <hr>
  <CustomRefTest></CustomRefTest>
  <hr>
  <TeacherTest2/>
  <hr>
  <TeacherTest/>
  <hr>
  <Hooktest></Hooktest>
  <hr>
  <MyWatch3></MyWatch3>
  <hr>
  <MyWatch2></MyWatch2>
  <hr>
  <MyWatch1></MyWatch1>
  <hr>
  <Computedv3></Computedv3>
  <hr>
  <Demo @show="showme" msg="test" who="谁说的">
    <template v-slot:myspan>
    <span>
      插件，传递给子控件使用
    </span>
    </template>
  </Demo>
</template>

<script>
// 这里报了个错，找半天，引入的时候需要带着vue的扩展名啊！！！
import CustomRefTest from "./components/CustomRefTest.vue"
import Demo from "./components/Demo.vue"
import Computedv3 from "./components/Computedv3.vue"
import MyWatch1 from "./components/MyWatch1.vue";
import MyWatch2 from "./components/MyWatch2.vue";
import MyWatch3 from "./components/MyWatch3.vue";
import Hooktest from "./components/Hooktest.vue";
import TeacherTest from "./components/TeacherTest.vue";
import TeacherTest2 from "./components/TeacherTest2.vue";
import Erzi from "./components/Erzi.vue";
import {provide, reactive, toRefs} from "vue";

// 异步引入需要用到import()和defineAsyncComponent函数
import {defineAsyncComponent} from "vue";
const AsyncCom = defineAsyncComponent(()=>{return import("./components/AsyncCom.vue")})
export default {
  name: "App",
  components: {
    Erzi, CustomRefTest,
    TeacherTest2,TeacherTest,
    Hooktest,
    MyWatch2,MyWatch3,MyWatch1,
    Computedv3, Demo,AsyncCom ,},
  setup(){

    let stu=reactive({name:'张三',age:18})
    function showme(value){
      alert(`show me 收到参数：${value}`);
    }
    provide("stu",stu)
    return{
     ...toRefs(stu), showme
    }
  }
}
</script>

<style>
  #ye{
    background-color: cadetblue;
    padding: 10px;
  }
</style>